<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	xmlns:th="http://www.thymeleaf.org" layout:decorator="common/layout">
<head>
<meta charset="UTF-8" />
<title>后台管理 | 会员列表</title>
<link rel="stylesheet" type="text/css" href="css/pager/pager_blue.css" />
</head>
<body>
	<section layout:fragment="content-header">
		<h1>
			<i class="fa fa-use fa-fw"></i>会员管理<small></small>
		</h1>
		<ol class="breadcrumb">
			<li><a href="/"><i class="fa fa-dashboard"></i>首页</a></li>
			<li class="active">会员列表</li>
		</ol>
	</section>
	<section layout:fragment="content">
		<!-- row -->
		<div class="row">
			<div class="col-xs-12">
				<div class="box">
					<div class="box-header with-border">
						<h3 class="box-title">会员列表</h3>
					</div>
					<!-- /.box-header -->
					<div class="box-body">
						<div id="example1_wrapper"
							class="dataTables_wrapper form-inline dt-bootstrap">
							<!-- filter -->
							<div class="row">
								<div class="col-sm-12 mt5 mb15">
									<div class="pull-left"></div>
									<div class="dataTables_filter pull-right">
										<div class="col-sm-8">
											<div class="form-group has-feedback">
												<input type="text" name="query" th:value="${query}"
													class="form-control col-xs-4" placeholder="请输入关键词搜索" /><span
													class="fa fa-search form-control-feedback"></span>
											</div>
										</div>
										<div class="col-sm-4 pull-right text-right">
											<button type="button" class="btn btn-info" id="query">搜索</button>
										</div>
									</div>
								</div>
							</div>
							<!-- list -->
							<div class="row">
								<div class="col-sm-12">
									<table id="grid"
										class="table table-bordered table-striped font14" role="grid"
										aria-describedby="info">
										<thead>
											<tr role="row">
												<th rowspan="1" colspan="1"></th>
												<th rowspan="1" colspan="1">会员ID</th>
												<th rowspan="1" colspan="1">账号</th>
												<th rowspan="1" colspan="1">名称</th>
												<th rowspan="1" colspan="1">手机</th>
												<th rowspan="1" colspan="1">性别</th>
												<th rowspan="1" colspan="1">VIP</th>
												<th rowspan="1" colspan="1">注册日期</th>
											</tr>
										</thead>
										<tbody>
											<tr role="row" class="odd" th:each="user:${lst}">
												<td></td>
												<td th:text="${user.userId}">userId</td>
												<td th:text="${user.userString}">userString</td>
												<td th:text="${user.name}">name</td>
												<td th:text="${user.phone}">phone</td>
												<td
													th:text="${user.gender}==0?'':(${user.gender}==1?'男':'女')">gender</td>
												<td><i class="fa fa-edit font12"></i> <a
													class="dt-edit" href="javascript:;"
													th:attr="data-userid=@{${user.userId}}"
													th:attrappend="data-value=@{${user.vip}}"
													data-toggle="modal" data-target="#editModal"
													th:text="${user.vip}==0?'普通用户':(${user.vip}==1?'vip':'vip年会员')">vip
												</a></td>
												<td
													th:text="${#calendars.format(user.createtime,'yyyy-MM-dd')}">createtime</td>
											</tr>
										</tbody>
										<tfoot th:if="${gridPaging.totalRecord}==0">
											<tr>
												<td rowspan="1" colspan="8" class="text-center">数据为空</td>
											</tr>
										</tfoot>
									</table>
								</div>
							</div>
							<!-- pagination -->
							<div class="row">
								<div class="pull-left"></div>
								<div class="pull-right">
									<div class="col-sm-12">
										<div role="pagination" class="pull-right mr35" id="kkpager"
											th:attr="data-page=@{${gridPaging.page}},data-total-page=@{${gridPaging.totalPage}},data-total-record=@{${gridPaging.totalRecord}}">
										</div>
									</div>
								</div>
							</div>
							<!-- /.pagination -->
						</div>
					</div>
					<!-- /.box-body -->
				</div>
			</div>
		</div>
		<!-- /.row -->
		<!-- modal -->
		<div class="modal fade" id="editModal" tabindex="-1" role="dialog"
			aria-labelledby="editModalLabel">
			<!-- modal-dialog -->
			<div class="modal-dialog" role="document">
				<!-- modal-content -->
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="editModalLabel">编辑VIP</h4>
					</div>
					<div class="modal-body">
						<form>
							<div class="form-group">
								<label for="vip" class="control-label">VIP:</label> <select
									id="vip" class="form-control " tabindex="-1" aria-hidden="true">
									<option value="0" selected="selected">普通用户</option>
									<option value="1">VIP</option>
									<option value="2">VIP年会员</option>
								</select>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-info" id="save">保存</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>
		<!-- /.modal -->
	</section>
	<!-- own js -->
	<section layout:fragment="js">
		<script th:src="@{/js/pager/pager.js}"></script>
		<script th:src="@{/js/users/index.js}"></script>
	</section>
</body>
</html>